<template>
  <div class="BigBox">
    <div class="box">
      <div>浏览渠道</div>
      <div>浏览次数（总）</div>
      <div>分享类型（次）</div>
      <div>浏览时长（总）</div>
      <div>时长明细</div>

    </div>

<!--    <div class="box">
      <div>公众号</div>
      <div>{{GZHbrowerTimes}}</div>
      <div>公众号文章：{{GZHshareTimes}}</div>
      <div>{{GZHbrowerTime}}</div>
      <div>公众号文章：{{GZHarticleTime}}</div>

    </div>-->


    <div class="box">
      <div>小程序</div>
      <div>{{XCXHbrowerTimes}}</div>
      <div>
        <div style="border-right: none">链接： {{XCXHshareLinkTimes}}</div>
        <div>店铺：{{XCXHshareshop}}</div>
      </div>
      <div>{{XCXbrowerTime}}</div>
      <div>
        <div style="border-right: none">链接：{{XCXHLinkTime}}</div>
        <div>店铺：{{XCXHshopTime}}</div>
      </div>

    </div>


   <!-- <div class="box">
      <div>用户分享</div>
      <div>{{userSharebrowerTimes}}</div>
      <div>链接：{{userShareTypeLink}}</div>
      <div>{{userSharebrowerTime}}</div>
      <div>链接：{{userShareLinkTime}}</div>

    </div>

    <div class="box">
      <div>代理分享</div>
      <div>{{proxySharebrowerTimes}}</div>
      <div>
        <div style="border-right: none">链接： {{proxyShareshareLinkTimes}}</div>
        <div>海报：{{proxySharesharePoster}}</div>
      </div>
      <div>{{proxySharebrowerTime}}</div>
      <div>
        <div style="border-right: none">链接：{{proxyShareLinkTime}}</div>
        <div>海报：{{proxySharePosterTime}}</div>
      </div>

    </div>-->
    <br>
    <br>
  </div>
</template>

<script>

  export default {
    name: "browserAddition",
    props: {
      //30个字段总共  也可以写成数组的形式
      GZHbrowerTimes: {
        type: String
      },
      GZHshareTimes: {
        type: String
      },
      GZHbrowerTime: {
        type: String
      },
      GZHarticleTime: {
        type: String
      },


      XCXHbrowerTimes: String,
      XCXHshareLinkTimes: String,
      XCXHshareshop: String,
      XCXbrowerTime: String,
      XCXHLinkTime: String,
      XCXHshopTime: String,

      // 用户分享
      userSharebrowerTimes: String,
      userShareTypeLink: String,
      userSharebrowerTime: String,
      userShareLinkTime: String,


      proxySharebrowerTimes: String,
      proxyShareshareLinkTimes: String,
      proxySharesharePoster: String,
      proxySharebrowerTime: String,
      proxyShareLinkTime: String,
      proxySharePosterTime: String,

    },
    // 经营报表 微页面 汇总
    data() {
      return {};
    },
    created() {

    },
    mounted() {

    },
    methods: {}
  };
</script>

<style scoped lang="less">

  .box {
    width: 100%;
    border: 1px solid #e8e8e8;
    margin: 0 auto;
    display: flex;
    text-align: center;
  }

  /*#e8e8e8*/
  .box div {
    /*height: 40px;*/
    line-height: 37px;
    flex: 1;
    border-right: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
    justify-content: center;

  }

  .box div:last-child {
    border-right: 0px solid;
  }

  .box:not(:first-child) {
    border-top: none;
  }

  .box:nth-child(odd) {
    background-color: #FFFAFA;
  }

  .box:nth-child(even) {
    background-color: #F5F5F5;
  }
</style>